<template>
  <div class="comment-panel">
    <div class="comment-title" v-if="showComment">
      <div class="title">
        评论<spam class="comment-count">{{ dataSource.totalCount || 0}}</spam>
      </div>
      <div :class="['order-type-item', orderType === 0 ?'avatar' : '']"
      @click="changeOrder(0)">
        最热
      </div>
      <el-divider direction="vertical"/>
      <div :class="['order-type-item', orderType === 1 ?'avatar' : '']"
           @click="changeOrder(1)">
        最新
      </div>
    </div>
    <div v-else></div>
    <div class="comment-content-panel">
      <VideoCommentSend></VideoCommentSend>
    </div>
    <div class="comment-list">
      <DataLoadMoreList
          :dataSource="dataSource"
          :loading="loadingData"
          @loadData="loadCommentList"
          layoutType="list"
          loadEndMsg="没有更多评论"
      >
        <template #default="{data}">
          <VideoCommentItem :data="data"></VideoCommentItem>
        </template>
      </DataLoadMoreList>
    </div>
  </div>
</template>
<script setup>
import {computed, getCurrentInstance, inject, onMounted, provide, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import VideoCommentSend from "@/views/videoDetail/VideoCommentSend.vue";
import DataLoadMoreList from "@/components/DataLoadMoreList.vue";
import VideoCommentItem from "@/views/videoDetail/VideoCommentItem.vue";
import {LoadVideoComment} from "@/api/video.js";
import {mitter} from "@/eventbus/eventBus.js";
import message from "@/utils/Message.js";
import comment_loadComment from "@/data/comment_loadComment.json";

const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const loadingData = ref(false);
const dataSource = ref({});
const orderType = ref(0)
const changeOrder = (type) => {
  if(orderType.value === type){
    return;
  }
  orderType.value = type;
  if(type === 1){
    // 最热
    if(dataSource.value.list && dataSource.value.list.length > 0){
      //取topType==3出来
      const opsList = dataSource.value.list.filter(item => {
        return item.topType === 3;
      });
      if(opsList.length > 0) {
        //dataSource.value.list按postTime时间2025-02-17 14:23:39 排序并移除topType==3，
        dataSource.value.list = dataSource.value.list.filter(item => {
          return item.topType !== 3;
        });
        // 按时间排序
        dataSource.value.list = dataSource.value.list.sort((a, b) => {
          return new Date(b.postTime).getTime() - new Date(a.postTime).getTime();
        });
        // 再把opsList放到第一位
        dataSource.value.list = [...opsList,...dataSource.value.list];
      }else{
        // 按时间排序
        dataSource.value.list = dataSource.value.list.sort((a, b) => {
          return new Date(b.postTime).getTime() - new Date(a.postTime).getTime();
        });
      }
    }
  }else{
    mitter.emit('toComments',1);
  }
  message.info('已按'+(type === 1 ? '最新' : '最热')+'排序');
}

const videoInfo = inject('videoInfo')
const showComment = computed(() => {
  return (
      videoInfo.value.interaction == 0 ||
      videoInfo.value.interaction.valueOf('0') === 0
  );
});

const showReplyHandler = (commentId) => {
  dataSource.value.list.forEach(item => {
    if(item.commentId === commentId){
      item.showReply = true;
    }else{
      item.showReply = false;
    }
  })
}
provide("showReply",showReplyHandler)

const loadCommentList = async () => {
  loadingData.value = true;
  const res = comment_loadComment.data;
  if(Object.keys(res).length === 0){
    return;
  }
  const userActionMap = {};
  const userActionList = res.userActionList || [];
  if(userActionList.length !== 0){
    userActionList.forEach((item) => {
      userActionMap[item.commentId] = item;
    });
  }
  const commentData = res.commentData || {};
  if(userActionList.length !== 0){
    commentData.list.forEach((item) => {
      setCommentActive(userActionMap,item);
      if(item.children && item.children.length > 0) {
        item.children.forEach((sub) => {
          setCommentActive(userActionMap, sub);
        });
      }
    });
  }
  const dataList = dataSource.value.List;
  dataSource.value = Object.assign({},commentData);

  if(commentData.pageNo>1) {
    dataSource.value.list = dataList.concat(commentData.list);
  }
  loadingData.value = false;
}

const setCommentActive = (userActionMap,item) => {
  const userAction = userActionMap[item.commentId];
  if(userAction) {
    if(ACTION_TYPE.COMMENT_LIKE.value === userAction.actionType) {
      item.likeCountActive = true;
    }else if(ACTION_TYPE.COMMENT_HATE.value === userAction.actionType) {
      item.hateCountActive = true;
    }
  }
}
mitter.on('toComments',(id) => {
  if(id===1) loadCommentList()
})
if (showComment.value) loadCommentList();
</script>
<style scoped lang="scss">
.comment-panel{
  margin-top: 20px;
  .comment-title{
    display: flex;
    align-items: center;
    font-size: 15px;
    .title{
      font-size: 20px;
      font-weight: 500;
      .comment-count{
        margin-left: 5px;
        font-size: 14px;
        margin-right: 30px;
        color: #999;
      }
    }
    .order-type-item{
      cursor: pointer;
    }
    .avatar{
      color: #409EFF;
    }
    .comment-content-panel{
      padding-left: 10px;
      position: relative;
      .comment-list{
        padding-bottom: 20px;
      }
    }
  }
}
</style>